<template>
  <div class="pos-r">
    <el-select v-model="value" filterable multiple collapse-tags :filter-method="filterMethod	" class="select-checkbox" popper-class="select-checkbox-popup" :placeholder="placeholder" @change="handleChange">
      <el-option v-for="item in list" :label="item.label" :value="item.value" :key="item.value">
        <div class="custom-option">
          <!--模拟checkbox-->
          <i></i>
          <span>{{item.label}}</span>
        </div>
      </el-option>
      <li class="fixed-footer">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      </li>
    </el-select>
    <div class="select-content-tip" v-if="selectList.length > 0">
      <span v-for="(item, index) in selectList" :key="index">{{item.label}}</span>
    </div>
  </div>
</template>

<script>
  import goodsNew from "@/views/acceptance/goodsNew";

  export default {
    data() {
      return {
        value: [],
        isIndeterminate: true,
        checkAll: false,
        selectList: [],
        filterValue: ''
      }
    },
    model: {
      prop: 'selectedValue',
      event: 'change'
    },
    watch: {
      selectedValue(newVal) {
        this.value = newVal
        this.setSelectVal(newVal)
      }
    },
    props: {
      selectedValue: {
        type: Array,
        default: () => ([])
      },
      dataList: {
        type: Array,
        default: () => ([])
      },
      placeholder: {
        type: String,
        default: '请选择'
      }
    },
    computed: {
      list() {
        const val = this.filterValue
        if (val) {
          return this.dataList.filter((item) => {
            return !!~item.label.indexOf(val) || !!~item.label.toUpperCase().indexOf(val.toUpperCase())
          })
        }
        return this.dataList
      }
    },
    methods: {
      handleCheckAllChange(val) {
        this.value = val ? this.list.map(item => item.value) : []
        this.isIndeterminate = false
        this.$emit('change', this.value)
      },
      handleChange(value) {
        this.setSelectVal(value)
        this.$emit('change', value)
      },
      filterMethod(val) {
        this.filterValue = val
      },
      // 赋值选择的数据对象集合用来展示tip
      setSelectVal(val) {
        this.selectList = [] // 初始化选择数据容器
        this.list.forEach(item => {
          val.forEach(tem => {
            if (item.value === tem) {
              this.selectList.push(item)
            }
          })
        })
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/var.scss";
  .el-tag.el-tag--info {
    &:first-child {
      width: 55%;
    }
    &:nth-child(2) {
      width: 24%;
    }
    .el-select__tags-text {
      width: 85%;
      display: inline-block;
      overflow-wrap: break-word;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      vertical-align: top;
    }
  }
  .pos-r {
    position: relative;
    display: inline-block;
    .select-content-tip {
      position: absolute;
      z-index: 10;
      background: #ffff;
      color: #3862FE;
      border: 1px solid #ddd;
      padding: 4px;
      display: none;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      top: 30px;
      span {
        font-size: 12px;
        margin-left: 4px;
      }
    }
    &:hover {
    .select-content-tip {
      display: block;
    }
    }
  }
  .select-checkbox-popup {
    .el-select-dropdown__list {
      padding-bottom: 32px !important;
      .fixed-footer {
        padding: 6px 20px;
        background: #fff;
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 99;
      }
    }
    &.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
      &::after {
        display: none;
      }
      .custom-option {
        i {
          background-color: $themeColor;
          border-color: $themeColor;
          &::after {
            transform: rotate(45deg) scaleY(1);
          }
        }
      }
    }
  }

  .custom-option {
    display: flex;
    align-items: center;
    i {
      display: inline-block;
      position: relative;
      border: 1px solid $borderColor;
      border-radius: 2px;
      box-sizing: border-box;
      width: 14px;
      height: 14px;
      margin-right: 6px;
      background-color: #FFFFFF;
      z-index: 1;
      transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
      &::after {
        box-sizing: content-box;
        content: "";
        border: 1px solid #FFFFFF;
        border-left: 0;
        border-top: 0;
        height: 7px;
        left: 4px;
        position: absolute;
        top: 1px;
        transform: rotate(45deg) scaleY(0);
        width: 3px;
        transition: transform .15s ease-in .05s;
        transform-origin: center;
      }
    }
  }
</style>
